<template>
  <div class="p-d">
    <div class="admin-page log b-f p-d">
      <el-row class="top-tabs-box">
        <el-tabs v-model="activeName">
          <el-tab-pane
            label="用户日志"
            name="userLog"
          >
            <UserLog />
          </el-tab-pane>
          <el-tab-pane
            label="系统日志"
            name="sysTemLog"
            lazy
          >
            <SysLog />
          </el-tab-pane>
          <el-tab-pane
            label="设备监控日志"
            name="devLog"
            lazy
          >
            <DevLog />
          </el-tab-pane>
          <el-tab-pane
            label="应用日志"
            name="appLog"
            lazy
          >
            <SysTemLog />
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>

<script>
import UserLog from './userLog/userLog.vue'
import SysTemLog from './sysTemLog/sysTemLog.vue'
import DevLog from './devLog/devLog.vue'
import SysLog from './sysLog/sysLog.vue'
export default {
  name: 'LogIndex',
  components: { UserLog, SysTemLog, DevLog, SysLog },
  data() {
    return {
      activeName: 'userLog'
    }
  }
}
</script>

<style lang="less" scoped>
.log {
  padding: 20px;
  .el-tabs {
    ::v-deep.el-tabs__header {
      padding: 0px;
      height: 48px;
      line-height: 48px;
    }
  }
  ::v-deep.top-tabs-box .el-tabs .el-tabs__header::after {
    height: 1px;
    background-color: #f2f2f2;
  }
}
.admin-page {
  height: 80vh;
}
</style>
